<template>
	<div>
		<!-- <el-button type="success" @click="sendEmail" class="getYzm">获取验证码</el-button> -->
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item prop="yzm" class="ii">
				<span>获取验证码</span>
				<el-input type="text" v-model="ruleForm.yzm" autocomplete="off"></el-input>
				<el-button type="success" @click="sendEmail" class="getYzm" v-show="count">获取验证码</el-button>
				<el-button  @click="sendEmail" class="getYzm" v-show="!count" disabled>{{ num }}</el-button>
			</el-form-item>
			<el-form-item prop="checkPass" class="ii">
				<span>新密码</span>
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item prop="checkPass2" class="ii">
				<span>确认新密码</span>
				<el-input type="password" v-model.number="ruleForm.checkPass2"></el-input>
			</el-form-item>
			<el-form-item class="ii">
				<div class="item_form">
					<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
// 获取修改密码验证码， 判断验证码是否为true
import { changePassword , judgePassword } from '@/api/User'

export default {
	name: 'ChangePassWord',
	data() {
		// 判断验证码非空
		var checkYzm = (rule, value, callback) => {
			if (value == '') {
				return callback(new Error('验证码不能为空'));
			} else {
				callback()
			}
		};
		// 判断密码
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			}else{
				callback();
			}
		};
		// 判断两次密码是否一致
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.checkPass2) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			count: true, //控制倒计时
			num: 30, //倒计时时间
			ruleForm: {
				yzm: '',
				checkPass: '',
				checkPass2: ''
			},
			rules: {
				yzm: [
					{ validator: checkYzm, trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass, trigger: 'blur' }
				],
				checkPass2: [
					{ validator: validatePass2, trigger: 'blur' }
				]
			}
		};
	},
	methods: {
		sendEmail() {
			// 点击按钮  获取验证码
			changePassword(this.$store.state.token).then(res => {
				if (res.data.status == 'success') {
					this.$message({
						message: res.data.msg,
						type: 'success'
					});	
					// 倒计时功能
					this.count = false
					if (this.count == false) {
						let timer = setInterval(() => {
							this.num--;
							if (this.num <= 0) {
								this.count = true
								clearInterval(timer)
							}
						}, 1000)
					}
				} else {
					this.$message.error(res.data.msg);
				}
			})
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					// 判断验证码，两次密码是否为真
					judgePassword(this.$store.state.token,{
						text:this.ruleForm.yzm,
						pwd1:this.ruleForm.checkPass,
						pwd2:this.ruleForm.checkPass2
					}).then(res=>{
						if(res.data.status == 'success') {
							this.$message({
								message:res.data.msg,
								type:'success'
							})
						} else {
							this.$message.error('更改密码失败,请联系管理员')
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style>
.getYzm {
	margin-top: 20px;
	width: 150px;
	margin-left: 10px;
}

.getYzm>span {
	text-align: center;
}

.ii > .el-form-item__content {
	display: flex;
	align-items: flex-end;
}

.el-form-item__content>span {
	display: block;
	width: 100px;
	text-align: center;
}

.el-form-item__error {
	margin-left: 100px;
}

.el-input__icon {
	margin-left: 80px;
}

.item_form {
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translate(-100%);
}

.el-tabs__content {
	height: 380px;
}
</style>